import React, { Component } from 'react'
import { Card, Input, Button, DatePicker } from 'antd';
import style from './index.css';
import ReportCard from '@/components/ReportCard';
import BaseComponent from '@/components/BaseComponent';
import { connect } from 'dva';

import moment from 'moment';

@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
export default class index extends BaseComponent {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      isUploading: false,
      form: {
      },
    }
  }


  screeningYearChange = e => {

    const value = e;
    this.setState(params => ({
      form: {
        ...params.form,
        screeningYear: value,
      },
    }), () => {
      this.show('3')


    });
  };
  institutionNameChange = (e) => {
    const value = e.target.value;
    this.setState((params) => ({
      form: {
        ...params.form,
        institutionName: value
      }
    }));
  }

  componentDidMount() {
    this.show("3")
  }

  //展示
  show = (type) => {
    const { form } = this.state
    const screeningYear = form.screeningYear ? moment(form.screeningYear).format("YYYY") : ''
    this.execHttp('summaryfAnnualReport/show', { user: this.props.currentUser.id, type, screeningYear }).then((resp) => {
      if (resp && resp.success) {
        if (type == '3' && resp.data.list.length > 0) {
          this.setState((params) => ({
            form: {
              ...params.form,
              writtenConsentFilePath: resp.data.list[0].absolute_url,
              writtenConsentUrl: resp.data.list[0].url,
              screeningYear: resp.data.list[0].screening_year,
              institutionName: resp.data.list[0].institution_name
            }
          }));
        }
      }
    });
  }

  handleUploadBefore = (file, fileList) => {
    this.setState({ isUploading: true }, () => {
      this.hide = this.loadingMessage('正在上传...');
    });
    return true;
  };
  handleBlUploadChange = ({ info }) => {
    if (info.file.status !== 'uploading') {
      this.setState(
        {
          fileList: info.fileList,
        },
        () => { }
      );
    }
    if (info.file.status === 'done') {
      const response = info.file.response;
      const {
        data: { filePath, originalFilename },
      } = response;
      const arr = filePath.split('/');
      // 文件前缀
      const prefix = arr[arr.length - 2];
      const url = `${prefix}/${originalFilename}`;

      this.setState((params) => ({
        form: {
          ...params.form,
          writtenConsentFilePath: filePath,
          writtenConsentUrl: url,
        },
        isUploading: false,
      }));
      if (this.hide) {
        this.hide();
      }
      this.successMessage('上传成功');
    } else if (info.file.status === 'error') {
      this.errorMessage('文件上传出错,请联系管理员');
    }
  };
  handleDelBlImage = () => {
    this.setState((params) => ({
      form: {
        ...params.form,
        writtenConsentFilePath: '',
        writtenConsentUrl: '',
      },
    }));
  };

  saveUpload = (url, absoluteUrl, screeningYear, user, type) => {
    this.execHttp('summaryfAnnualReport/add', {
      url, absoluteUrl, screeningYear, user, type,
    }).then(resp => {
      if (resp && resp.success) {
        this.successMessage(resp.message);
      } else {
        this.errorMessage(resp.message);
      }
    });
  }


  saveClick = () => {
    const { writtenConsentUrl, writtenConsentFilePath, screeningYear } = this.state.form
    this.saveUpload(writtenConsentUrl, writtenConsentFilePath, screeningYear, this.props.currentUser.id, "3")

  }


  render() {
    return (
      <div>
        <Card size='small' title="工作照片" style={{ width: '100%' }}>
          <div className={style.content}>
            <div className={style.header}>
              <div className={style.headerItem}>
                机构名称
              </div>
              <div className={style.headerItemInput}>
                <Input placeholder="请输入机构名称" value={this.state.form.institutionName}
                  onChange={this.institutionNameChange} style={{ width: 200 }} />
              </div>
              <div className={style.headerItem}>
                筛查年度
              </div>
              <div className={style.headerItemInput} style={{width:"100%"}}>
                {/* <Input placeholder="请输入筛查年度" value={this.state.form.screeningYear}
                  onChange={this.screeningYearChange} style={{ width: 200 }} /> */}
                <DatePicker placeholder="请输入筛查年度"
                  mode="year" format="YYYY"
                  value={moment(this.state.form.screeningYear, "YYYY")}
                  onPanelChange={this.screeningYearChange}

                ></DatePicker>
              </div>
            </div>

            <div className={style.body}>
              <div className={style.bodyItem}>
                <div className={style.bodyItemLeft}>
                  <p>上传Word文档</p>
                </div>
                <div className={style.bodyItemRight} >
                  <ReportCard
                    imagePreview={true}
                    emptyMsg={'暂无工作照片,请上传工作照片'}
                    uploadBtnLabel={'上传工作照片'}
                    fileUrl={this.state.form.writtenConsentUrl}
                    isUploading={this.state.isUploading}
                    beforeUpload={this.handleUploadBefore}
                    onChange={this.handleBlUploadChange}
                    onDelClick={this.handleDelBlImage}
                  ></ReportCard>

                </div>
              </div>
            </div>

          </div>
          <Button type="primary" style={{ marginTop: "20px" }} onClick={this.saveClick} >确定</Button>

        </Card>

      </div>
    )
  }
}
